<template>
	<view class="power-card ">
		<view class="card-header dis-ai bg-bor-h">
			<view class="status-indicator" :style="{backgroundColor: statusColor}"></view>
			<text class="title">{{ data.title }}</text>
		</view>

		<view class="divider"></view>

		<view class="card-body bg-bor">
			<view class="metric-row dis-jc-b">
				<text>功率：</text>
				<view class="dis-ai u-input">
					<uni-easyinput :styles="styles" v-model="data.power" placeholder="" />
					<text>KW</text>
				</view>
			</view>

			<view class="metric-row dis-jc-b">
				<text>功率因数：</text>
				<view class="dis-ai u-input">
					<uni-easyinput :styles="styles" v-model="data.powerFactor" placeholder="" />
					<text>COS</text>
				</view>
			</view>

			<view class="metric-row dis-jc-b">
				<text>电压设定：</text>
				<view class="dis-ai u-input">
					<uni-easyinput :styles="styles" v-model="data.voltage" placeholder="" />
					<text>V</text>
				</view>
			</view>

			<view class="metric-row dis-jc-b">
				<text>最大功率：</text>
				<view class="dis-ai u-input">
					<uni-easyinput :styles="styles" v-model="data.maxPower" placeholder="" />
					<text>KW</text>
				</view>
			</view>

			<view class="action-buttons">
				<button size="mini" :type="data.status === 'on' ? 'primary' : 'default'"
					@click="emit('toggle', index, 'on')">启动</button>

				<button size="mini" :type="data.status === 'off' ? 'warn' : 'default'"
					@click="emit('toggle', index, 'off')">关闭</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	interface PowerItem {
		title : string
		power : number
		powerFactor : number
		voltage : number
		maxPower : number
		status : 'on' | 'off' | 'error'
	}

	const props = defineProps<{
		data : PowerItem
		index : number
	}>()

	const emit = defineEmits<{
		(e : 'toggle', index : number, action : 'on' | 'off') : void
	}>()

	const statusColor = computed(() => {
		const colors = { on: '#67C23A', off: '#909399', error: '#F56C6C' }
		return colors[props.data.status] || '#909399'
	})
	const styles = {
		color: '#fff',
		borderColor: '#2979FF',
	}
</script>

<style scoped lang="scss">
	.power-card {
		overflow: hidden;
		margin-bottom: 24rpx;

		.card-header {
			padding: 24rpx;
			color: #fff;

			.status-indicator {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
			}
		}

		.card-body {
			padding: 48rpx;

			.metric-row {
				// min-width: 480rpx;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #fff;

				.u-input {
					width: 460rpx;
					text {
						margin-left: 16rpx;
						min-width: 60rpx;
					}
				}
			}

			.action-buttons {
				display: flex;
				justify-content: flex-end;
				margin-top: 32rpx;

				button {
					margin-left: 20rpx;
					min-width: 120rpx;
				}
			}
		}
	}
</style>